﻿@using PersonalWebSite.Common
@model PersonalWebSite.Models.PhotoAlbumViewModel
@{
    ViewBag.Title = "Hintea Dan Alexandru - Photos";
    Layout = "~/Views/Shared/_Layout.cshtml";
}

<div id="UniverseHolderWrapper">
    <div class="hdunv-fixture"> 
        <div data-hdunv_type="Universe" data-hdunv_x="0" data-hdunv_y="0" data-hdunv_w="1000" data-hdunv_h="500" data-hdunv_name="hD Universe" data-starfield_enabled="false" data-shootingstar_enabled="false">
            <div class="hdunv-content"></div>

            <div data-hdunv_type="Galaxy" data-hdunv_depth="0" data-hdunv_x="0" data-hdunv_y="0" data-hdunv_w="50" data-hdunv_h="350" data-hdunv_name="Header">
                <div data-hdunv_type="SolarSystem" data-hdunv_speed="0" data-hdunv_direction="cw" data-hdunv_x="0" data-hdunv_y="0" data-hdunv_w="0" data-hdunv_h="0" data-hdunv_name="MainSection Top">
                    <div class="hdunv-content">
                        @{Html.RenderAction("Button", "Tiles", new { IconName = "Home", Tip = "Home", NavigateUrl = Url.Action("Index", "Home") });}
                    </div>
                </div>
                <div data-hdunv_type="SolarSystem" data-hdunv_speed="0" data-hdunv_direction="cw" data-hdunv_x="0" data-hdunv_y="0" data-hdunv_w="0" data-hdunv_h="0" data-hdunv_name="MainSection Top">
                    <div class="hdunv-content">
                        @{Html.RenderAction("Button", "Tiles", new { IconName = "Back", Tip = "Back to Albums", NavigateUrl = Url.Action("PhotoAlbums", "Activity") });}
                    </div>
                </div>
            </div>


            <!-- ko foreach: { data:MainPhotos } -->
            <div data-hdunv_type="Galaxy" data-hdunv_depth="0" data-hdunv_x="0" data-hdunv_y="0" data-hdunv_w="500" data-hdunv_h="350" data-hdunv_name="Header">
                <div class="hdunv-content">
                    @{Html.RenderAction("Photo", "Tiles");}
                </div>
            </div>
            <!-- /ko -->

            <div data-hdunv_type="Galaxy" data-hdunv_depth="0" data-hdunv_x="0" data-hdunv_y="0" data-hdunv_w="750" data-hdunv_h="350" data-hdunv_name="Header">
                <div data-hdunv_type="SolarSystem" data-hdunv_speed="0" data-hdunv_direction="cw" data-hdunv_x="0" data-hdunv_y="0" data-hdunv_w="0" data-hdunv_h="0" data-hdunv_name="MainSection Top">
                    <!-- ko foreach: { data:SecondaryPhotos[0] } -->
                    <div data-hdunv_type="Planet" data-hdunv_speed="0.1" data-hdunv_direction="ccw" data-hdunv_g="1" data-hdunv_mass="1" data-hdunv_x="0" data-hdunv_y="0" data-hdunv_w="0" data-hdunv_h="0" data-hdunv_name="About Me">
                        <div class="hdunv-content">
                            @{Html.RenderAction("Photo", "Tiles");}
                        </div>
                    </div>
                    <!-- /ko -->
                </div>
                <div data-hdunv_type="SolarSystem" data-hdunv_speed="0" data-hdunv_direction="cw" data-hdunv_x="0" data-hdunv_y="0" data-hdunv_w="0" data-hdunv_h="0" data-hdunv_name="MainSection Top">
                    <!-- ko foreach: { data:SecondaryPhotos[1] } -->
                    <div data-hdunv_type="Planet" data-hdunv_speed="0.1" data-hdunv_direction="ccw" data-hdunv_g="1" data-hdunv_mass="1" data-hdunv_x="0" data-hdunv_y="0" data-hdunv_w="0" data-hdunv_h="0" data-hdunv_name="About Me">
                        <div class="hdunv-content">
                            @{Html.RenderAction("Photo", "Tiles");}
                        </div>
                    </div>
                    <!-- /ko -->
                </div>
            </div>

            <!-- ko foreach: { data:RemainingPhotos } -->
            <div data-hdunv_type="Galaxy" data-hdunv_depth="0" data-hdunv_x="0" data-hdunv_y="0" data-hdunv_w="500" data-hdunv_h="350" data-hdunv_name="Header">
                <!-- ko foreach: { data:Items } -->
                <div data-hdunv_type="SolarSystem" data-hdunv_speed="0" data-hdunv_direction="cw" data-hdunv_x="0" data-hdunv_y="0" data-hdunv_w="0" data-hdunv_h="0" data-hdunv_name="MainSection Top">
                    <!-- ko foreach: { data:$data } -->
                    <div data-hdunv_type="Planet" data-hdunv_speed="0.1" data-hdunv_direction="ccw" data-hdunv_g="1" data-hdunv_mass="1" data-hdunv_x="0" data-hdunv_y="0" data-hdunv_w="0" data-hdunv_h="0" data-hdunv_name="About Me">
                        <div class="hdunv-content">
                            @{Html.RenderAction("Photo", "Tiles");}
                        </div>
                    </div>
                    <!-- /ko -->
                </div>
                <!-- /ko -->
            </div>
            <!-- /ko -->

        </div>
    </div>
</div>

<script type="text/javascript">

    $(window).resize(function () {
        $("#UniverseHolderWrapper").css("height", $(window).outerHeight());
    });
    $("#UniverseHolderWrapper").css("height", $(window).outerHeight());

    var PageViewModel = new function () {

        var self = this;

        this.PhotosFeed = { Items: [] };
        this.MainPhotos = [];
        this.SecondaryPhotos = [];
        this.RemainingPhotos = [];

        this.FormatData = function () {
            self.MainPhotos = self.PhotosFeed.Items.slice(0, 1);
            self.SecondaryPhotos.push(self.PhotosFeed.Items.slice(1, 3));
            self.SecondaryPhotos.push(self.PhotosFeed.Items.slice(3, 6));
            var batch = { Items: [] };
            var batchIndex = 0;
            var remainingPhotos = self.PhotosFeed.Items.slice(6, self.PhotosFeed.Items.length);
            for (var i in remainingPhotos) {
                var index = Math.floor((Number(i) - batchIndex * 9) / 3);
                batch.Items[index] = batch.Items[index] == null ? [] : batch.Items[index];
                batch.Items[index].push(remainingPhotos[i]);
                if ((i + 1) % 9 == 0) {
                    self.RemainingPhotos.push(batch);
                    batch = { Items: [] };
                    batchIndex++;
                }
            }
            if (batch.Items.length > 0)
                self.RemainingPhotos.push(batch);
        };

        this.test = function (a, b, c) {
            alert('test');
        };
    };

    var fetchPhotosAjaxIconId = -1;
    _hD.push(function () {
        fetchPhotosAjaxIconId = AjaxIconToggle(true);
        $.ajax('@Url.Action("FetchPhotosForAlbum", "Activity", new { albumId = Model.AlbumId })', {
            complete: function (jqXHR, textStatus) {
                if (AjaxIconToggle)
                    AjaxIconToggle(false, fetchPhotosAjaxIconId);
                else
                    _hD.push(function () { AjaxIconToggle(false, fetchPhotosAjaxIconId); });
            },
            success: function (data, textStatus, jqXHR) {
                if (data && data.Items) {
                    PageViewModel.PhotosFeed = data;
                    PageViewModel.FormatData();
                }

                InitAlbumTiles();
            },
            error: function (jqXHR, textStatus, errorThrown) {
                NotifierShow('Some error occured while trying to retrieve the photos. I\'m very sorry for that, please try again by refreshing the page.', 'This page depends on some external services like Google\'s Picasa Web Albums Service. It may happen that these services are not available sometimes so again, sorry for the inconvenience and please try again to reload the page.');
            }
        });
    });

    function InitAlbumTiles() {
        ko.applyBindings(PageViewModel, $(".hdunv-fixture")[0]);

        var universe = new hDUnivSim("#UniverseHolderWrapper", new MetroStyleDrawer(), InPageHtmlFixture);
        universe.AlignHorizontal = Align.Horizontal.Left;
        universe.InitHtml();

        $(".PhotoTileMainWrapper").tooltipsy();

        InitMetroTilesColouringEffect();
    };
</script>

